<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>监听事件</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <div id="von">
    <button v-on:click="sum">点击+1</button>
    <p>这个按钮被点击了 <strong>{{ counter }}</strong> 次</p>
    <!-- 阻止单击事件冒泡 -->
    <a href="http://www.360.com/" v-on:click="alert('360')"><span v-on:click.prevent.stop="alert('阻止单击事件冒泡')">阻止单击事件冒泡</span></a>
    <!-- 提交事件不再重载页面 -->
    <a href="http://www.360.com/" v-on:click.prevent="alert('提交事件不再重载页面')">提交事件不再重载页面</a>
    <div>
      <h2>按键修饰符</h2>
      <input v-on:keyup="submit" value="delete" />
      <!--  <input  v-on:keyup.tab="submit" value="tab"/>
      <input  v-on:keyup.enter="submit" value="enter"/>
      <input  v-on:keyup.esc="submit" value="esc"/>
      <input  v-on:keyup.space="submit" value="space"/>
      <input  v-on:keyup.up="submit" value="up"/>
      <input  v-on:keyup.down="submit" value="down"/>
      <input  v-on:keyup.left="submit" value="left"/>
      <input  v-on:keyup.right="submit" value="right"/> -->
    </div>
  </div>
  <script type="text/javascript">
  var von = new Vue({
    el: "#von",
    data: {
      counter: 0
    },
    methods: {
      sum: function() {
        return this.counter++;
      },
      alert: function(message) {

        alert( message );
      },
      submit: function(event) {
        alert("您按的是：" + event.code + " 键！");
        console.log(event);
      }
    }

  });
  </script>
</body>

</html>
